<template>
  <audio
    class="audio"
    ref="audio"
    @pause="onPause"
    @play="onPlay"
    @timeupdate="onTimeupdate"
    @loadedmetadata="onLoadedmetadata"
    :src="src"
    controls="controls"
    :hidden="true"
  ></audio>
</template>

<script>
/**
* audio 音频
* @author 朱琦（1972662943@qq.com）
* @date   时间：2021/12/28
*/
export default {
  name: 'VoiceAudio',
  props: {
    src: {
      type: String,
      require: true
    }
  },
  data () {
    return {
      audio: {
        // 该字段是音频是否处于播放状态的属性
        playing: false,
        // 音频当前播放时长
        currentTime: 0,
        // 音频最大播放时长
        maxTime: 0
      }
    }
  },
  computed: {

  },
  created () {

  },
  mounted () {
    this.$emit('init', this.audio)
  },
  methods: {
    // 控制音频的播放与暂停
    startPlayOrPause () {
      return this.audio.playing ? this.pause() : this.play()
    },
    /**
     * 播放音频
     */
    play () {
      this.$refs.audio.play()
    },
    /**
     * 暂停音频
     */
    pause () {
      this.$refs.audio.pause()
    },
    /**
     * 当音频播放
     */
    onPlay (e) {
      this.audio.playing = true

      this.onlyOnePlaying(e)
    },
    /**
     * 当音频暂停
     */
    onPause () {
      this.audio.playing = false
    },
    /**
     * 设置当前播放时间
     */
    setCurrentTime(num) {
      this.$refs.audio.currentTime = num
    },
    // 当timeupdate事件大概每秒一次，用来更新音频流的当前播放时间
    onTimeupdate (res) {
      // console.log('timeupdate')
      // console.log(res)
      this.audio.currentTime = res.target.currentTime
    },
    // 当加载语音流元数据完成后，会触发该事件的回调函数
    // 语音元数据主要是语音的长度之类的数据
    onLoadedmetadata (res) {
      // console.log('loadedmetadata')
      // console.log(res)
      this.audio.maxTime = parseInt(res.target.duration)
    },
    /**
     * 暂停页面中其他播放音频
     */
    onlyOnePlaying(e) {
      const target = e.target
      const audios = document.querySelectorAll('audio')
      audios.forEach(item => {
        if (item !== target) {
          item.pause()
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.audio {
}
</style>
